<template>
  <div class="My_details">
    <nav-bar :goBack="true" :title="topTitle" :isSearch="false"></nav-bar>

    <div class="setup">
      <van-cell v-for="(item, index) in gridListData" :key="index" class="Detailine">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="Detailine-text">{{item.title}}</span>
        </template>

        <template #right-icon>
          <van-image round width="22" height="22" v-if="item.src" :src="item.src" />
          <span class="Detailine-textl">{{item.accountnumber}}</span>
        </template>
      </van-cell>
    </div>

    <!-- 退出登录 -->
    <van-button color="#ff3333" round block class="SignOut" @click="signOutClick">退出登录</van-button>
  </div>
</template>

<script>
import NavBar from "components/public/NavBar.vue";
export default {
  components: {
    NavBar
  },
  name: "my",
  data() {
    return {
      // 通用变量
      // 顶部标题
      topTitle: "账号详情",

      show: false,
      gridListData: [
        { src: require("assets/images/touxiang.png"), title: "头像" },
        { accountnumber: window.sessionStorage.getItem('shareUserName'), title: "用户名" },
        { accountnumber: window.sessionStorage.getItem('shareUserName'), title: "账号" },
        {  }
      ]
    };
  },
  methods: {
    // 退出登录
    signOutClick(){
      window.sessionStorage.removeItem('mobileToken')
      this.$router.replace('/Login')
    }
  }
};
</script>

<style lang="less" scoped>
.My_details{
  height: calc(100vh - 49px);
  position: relative;
  .SignOut{
    position: absolute;
    bottom: 30px;
    width: 345px;
  }
}
.Detailine {
 display: flex;
 align-items: center;
 height: 60px;
 padding: 10px 0;
 .Detailine-text {
   font-size: 14px;
   color: #2a2b2d;
 }
 .Detailine-textl {
   font-size: 12px;
   color: #a5aeb7;
 }
}
.myl {
  background-color: #f8f8f8;
  padding-bottom: 8px;

  .my_lgm {
    padding: 20px 10px;
    align-items: center;
  }
}
.setup {
  align-items: center;

  .setup_hig {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    border-bottom: 1px solid #e4e4e4;

    .setup_color {
      font-size: 14px;
      color: #2a2b2d;
    }
  }
}
.navBar /deep/ .van-nav-bar {
  height: 44px;
}
.navBar /deep/ .van-nav-bar__title {
  font-size: 18px;
  color: #2a2b2d;
  font-weight: 600;
}
.navBar /deep/ .van-search {
  padding: 10px 15px;
}
.dataList_label {
  padding-top: 10px;
  padding-left: 10px;
  color: #a5aeb7;
  font-size: 14px;
}
.cell_title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 10px;
  .dataList_title {
    color: #2a2b2d;
    font-size: 18px;
    display: inline-block;
    margin-right: 20px;
    max-width: 180px;
  }
  .isCollection {
    margin-right: 10px;
  }
  .cell_tag {
    transform-origin: left;
    transform: scale(0.75);
  }
}
</style>